HTML <figure> Tag

The <figure> tag in HTML5 is used to add self-contained content like illustrations, diagrams, photos, or codes listing in a document. It is related to the main flow, but it can be used in any position of a document and the figure goes with the flow of the document and if remove it then it should not affect the flow of the document. In simple words, the figure tag is used to semantically organize the content of images, videos, audios or even charts or tables, block of codes in the HTML document.    

Syntax: 

<figure>
    <img src="url">
    <figcaption>content</figcaption>
</figure>

Attributes: It contains mostly two tags which are given below:

Example: This example illustrates the use of the <figure> tag along with src, width, height & alt attributes.

Output:  In this case the <figure> tag, it has made all the changes, as the image with caption is properly aligned with some space away from the margin. The image and caption are part of each other. The border is added to both <figure> tag and <figcaption> tag, both have occupied the border.  <figure> tag is inline element.

In this article, we will learn about the <figure> & <img> tag along with its implementation. We will also learn the differences between them. Let’s begin the discussion with the figure tag in HTML.